<template>
  <div>
		<van-nav-bar  title="订单详情" left-arrow @click-left="$utils.back($route.path)" />	
			<div class="nav-top" >
				<div class="pd-24 mg-24 br-16 bg-white">
					<div class="product">
						<div class="room">
							<div class="w-200 br-12"><img-box :img-url="ProductImage" class="br-12 ofh" /></div>
							<div>
								<div class="fs-32 mb-28">{{ info.RoomName }} {{ info.RoomNo }}</div>
								<div class="telSupplier" ><a :href="'tel:'+info.SupplierTel"><svg-icon icon-class="tel3" class="fs-24 color-gray mt-10 ml-12"/>联系商家</a></div>
							</div>
						</div>
						<div class="fs-42">{{ info.StateName }}</div>
					</div>
					<div class="useTime">

						<div class="flex flex-s-c">
							<div class="fs-50 fw-b">{{ info.SaleType === 0 ? startDate:startTime }}</div>
							<div class="time">
								<div v-if="info.SaleType === 0" class="times">共{{ info.Amount }}晚</div>
								<div v-if="info.SaleType === 1" class="times">共{{ info.Amount/2 }}小时</div> 
							</div>
							<div class="fs-50 fw-b">{{ info.SaleType === 0 ? endDate:endTime }}</div>							
						</div>
						
						<div class="flex flex-s-c">
							<div>{{ info.SaleType === 0 ? startTime+ '后入住':startDate }}</div>
							<div>{{ info.SaleType === 0 ? endTime+ '前离店':endDate }}</div>
						</div>
					</div>
					<div class="flex flex-s-c mtb-28 fs-28">
						<div>
							<p class="mb-16">店铺名称</p>
							<p>订单金额</p>
							<p v-if="info.CouponMoney !== 0">优惠金额</p>
							<p v-if="info.CouponMoney !== 0">实付金额</p>
						</div>
						<div class="tar">
							<p class="mb-16">{{ info.StoreName }}</p>
							<p>￥{{ info.PriceSum }}</p>
							<p v-if="info.CouponMoney !== 0">-￥{{ info.CouponMoney }}</p>
							<p v-if="info.CouponMoney !== 0">￥{{ info.ReceiptMoney }}</p>
						</div>
					</div>
					
					<div class="fs-28 color-gray-light order_msg">						
						<div class="mb-10">
							<span class=" mr-10">订单编号：</span>
							<span>{{ info.Sn }}</span>
						</div>
						<div class="mb-10">
							<span class="mr-10">下单时间：</span>
							<span>{{ info.OrderAddTime }}</span>
						</div>
						<div class="mb-10">
							<span class="mr-10" v-if="info.SaleType === 0"> 到店时间：</span>
							<span class="mr-10" v-if="info.SaleType === 1"> 使用时间：</span>
							<span v-if="info.State ===2 || info.State === 5">{{ info.ActualStartTime }}</span>
						</div>
					</div>
				</div>
			
				
				<!-- 底部确认订单 -->
				<div class="fixed-bottom flex flex-fe-c pr-24 ptb-24 bg-white">
					<button class="ml-8 sef-btn br-32 color-dark fs-24 plr-38 h" native-type="submit"
							v-if="info.State == 0" @click="CancleOrder(info)"> 取消订单</button>
					<van-button class="ml-8 br-32 color-white fs-24 plr-38 other-btn" native-type="submit"
							v-if="info.State == 0 && info.SaleType === 0" @click="goPay(info,1)">立即支付</van-button>
					<van-button class="ml-8 br-32 color-white fs-24 plr-38 other-btn" native-type="submit"
							v-if="info.State == 0 && info.SaleType === 1" @click="goPay(info,2)">立即支付</van-button>
					<van-button class="ml-8 sef-btn br-32 color-dark fs-24 plr-38 h" native-type="submit"
              v-if="info.State == 1 && switch30 === 1" @click="openRefundApply(info)">申请退款</van-button>
					<button class="ml-8 br-32 color-white fs-24 plr-38 other-btn" native-type="submit"
							v-if="info.State == 2" @click="GetRoomQrCode(info)">开门码</button>					
					<van-button class="ml-8 sef-btn br-32 color-dark fs-24 plr-38 h" native-type="submit"
              v-if="info.State !== 0  && info.SaleType === 0" @click="againOrder(info,0)">再次预定</van-button>
					<van-button class="ml-8 sef-btn br-32 color-dark fs-24 plr-38 h" native-type="submit"
              v-if="(info.State == 3||info.State == 4||info.State == 5||info.State == 6||info.State == 7) && info.SaleType === 1" @click="againOrder(info,1)">再次预定</van-button>
					<van-button class="ml-8 sef-btn br-32 color-dark fs-24 plr-38 h" native-type="submit"
            	v-if="info.State == 2 && info.SaleType === 1" @click="renewalOrder(info,2)">续单</van-button>
				</div>			
			
			
			</div>
			
			<!-- 开门码弹窗 -->
			<van-dialog v-model="posterShow" class="posterDiv" :showConfirmButton="false" width="80%">
				<div class="poster_main  bg-white bblr-32 bbrr-32 mb-70">
					<SvgIcon icon-class="close" class="fs-60  closecss z-out color-dark" @goPage="closeQrcode" />
					<div class="qrcode" id="qrcode" ref="qrcode"><img class="is-200" :src="qrcode"/></div>
					<div class="mt-40">将此二维码对准设备，即可开门</div>
				</div>
				<div class="flex flex-sa-c">
					<div class="flex flex-d-c flex-center flex-1">
						<div class="flex flex-center down br-54">
							<svg-icon icon-class="down" class="fs-40 color-white" />
						</div>
						<span class="fs-36 lh-40 mt-16 color-white">长按二维码保存图片</span>
					</div>
				</div>
			</van-dialog>
			<!-- 退款原因 -->
			<van-dialog v-model="refundApply" title="请输入退款原因" show-cancel-button @confirm="OrderRefundApply" @cancel="cancelRefundApply">
				<van-field v-model="param.reason" type="textarea" class="fs-32 mt-15" placeholder="请输入退款原因~" rows="7" maxlength="50" />
			</van-dialog>
			<!-- 茶室续单 -->
			<van-dialog v-model="renewalShow" title="请输入续单时长" show-cancel-button @confirm="OrderRenewalOrder" @cancel="cancelRenewalOrder" confirmButtonText="确定续单">
				<div class="flex flex-center pos-r mtb-24">
					<van-stepper v-model="num" step="0.5" disable-input :decimal-length="1" min="0.5" :max="MaxAmount" input-width="80px" button-size="42px" />
					<span class="ml-10">小时</span></div>
				<div class="tac fs-26 mb-30 color-gray-light">提示:此房间最多可续单{{MaxAmount}}小时</div>
			</van-dialog>
  </div>
</template>
<script>
import SvgIcon from 'components/SvgIcon'
import imgBox from 'components/imgBox'
import jrQrcode from "jr-qrcode";
import { CancleOrder,GetOrderBookInfo,OrderRefundApply,GetRoomQrCode,GetProductBookData,GetCanAddBookOrderTime,SubmitAddBookOrder } from 'api/teaHouse'
import { GetBusinessFunction } from 'api/businessSetting'
import { AddOrEditUserTempCarList } from 'api/member'
export default ({
	components: {
		imgBox,
		SvgIcon,		
  },
	props: {},
	data(){
		return{	
			orderId: 0,
			refundApply: false, 
			renewalShow: false,
			param: {}, //申请退款传参			
			switch30: 0, //申请退款是否显示(0不显示 1显示)
			blank: false, // 是否为空数据
      posterShow: false, // 二维码弹窗显示
      qrcode: '', // 二维码图片地址
      ewm: '', // 点击开门码时存储所带数据生成二维码内容
      infos: {}, // 点击下载二维码存储所带数据(h5下载二维码图片名称)嵌套小程序只需长按图片保存所以
	
			info: {}, //订单信息
			ProductImage: '',
			startDate: '', //开始日期
			endDate: '', //结束日期
			startTime: '', //开始时间
			endTime: '', //结束时间			
			switch30: 0, //申请退款是否显示(0不显示 1显示)
			ProductId: 0,
			MaxAmount: 0, //最大续单时长
			num: 0.5,
			params: {
				orderId: '', // 订单ID
				userCarListInput: {
						list: []
				}, // 购物车数据
				storeId: '', // 门店ID
				productId: '', // 商品ID
				roomId: '', // 选中房间ID
				SaleType: -1, // 售卖方式          
				userName: '', // 姓名
				userIdentityCard: '', // 身份证
				userTel: '', // 电话
				userCount: '', // 登记人数		
				estimateArrivalTime: '', // 预计到店时间
				orderRemark: '', // 入住信息留言
			},
			SkuId:0,
		}
	},
	
	created(){
		this.orderId = this.$route.query.id  //订单id
		this.saleType = this.$route.query.saleType
		console.log(this.orderId,this.saleType, "订单idd")
		this.GetBusinessFunction()
		this.GetOrderBookInfo()
	},
		
	methods:{
		inputHandler (value) {
			if(value > this.MaxAmount){
				this.$toast('请输入0.5-' + this.MaxAmount)
				this.num = 0.5
			}      
    },
		//获取开关权限
		GetBusinessFunction(){
			GetBusinessFunction(30).then(res => {
				if (res) {
					this.switch30 = res.Data[0].Value;	
				}
			})
		},
		GetProductBookData() {
			GetProductBookData({
					productId: this.ProductId,
					storeId: this.info.StoreId,
			}).then(res => {
				if(res){
					var LaterTime = res.Data.ProductBookSetting.LaterTime  //推后时间(分钟)
					var LeadTime = res.Data.ProductBookSetting.LeadTime  //提前时间(分钟)
					var newData1 =  Date.parse(this.info.BookStartTime);  
					var newData2 =  Date.parse(this.info.BookEndTime);  
					var diffTime1 = Math.abs(newData1 - LaterTime*60*1000); //计算推后时间
					diffTime1 = new Date(diffTime1)  //时间格式转换
					var diffTime2 = Math.abs(newData2 + LeadTime*60*1000);  //计算提前时间
					diffTime2 = new Date(diffTime2) //时间格式转换
					var date1 =  this.$utils.dateFomat('yyyy-mm-dd HH:MM', diffTime1)  //日期格式转换
					var date2 =  this.$utils.dateFomat('yyyy-mm-dd HH:MM', diffTime2)  //日期格式转换
					var startDate = date1.split(' ')
					var endDate = date2.split(' ')
					this.startTime = startDate[1]
					this.endTime = endDate[1]
				}
			})

		},
		GetOrderBookInfo(){
			GetOrderBookInfo(this.orderId).then(res => {
				if(res){		
					console.log(res.Data,"订单信息")			
					this.info = res.Data
					this.params.orderId = res.Data.OrderId
					this.params.storeId = res.Data.StoreId
					this.params.V_GradePrice = res.Data.Price
					this.SkuId = res.Data.DetailList[0].SkuId
					this.params.productId = res.Data.ProductId
					this.params.SaleType = res.Data.SaleType
					this.params.roomId = res.Data.RoomId      
					this.params.userName = res.Data.UserName
					this.params.userIdentityCard = res.Data.UserIdentityCard
					this.params.userTel = res.Data.UserTel
					this.params.userCount = res.Data.UserCount
					this.params.estimateArrivalTime = res.Data.EstimateArrivalTime
					this.params.orderRemark = res.Data.orderRemark
					if(res.Data.DetailList && res.Data.DetailList.length > 0){
						this.ProductImage = res.Data.DetailList[0].ProductImage
						this.ProductId = res.Data.DetailList[0].ProductId
					}
					var startTime = res.Data.BookStartTime.split(' ')
					var endTime = res.Data.BookEndTime.split(' ')
					var startTime1 = startTime[1].split(':')
					var endTime1 = endTime[1].split(':')
					if(res.Data.SaleType === 0){
						var startDate1 = startTime[0].split('-')
						var endDate1 = endTime[0].split('-')
						this.startDate = startDate1[1] + '-' + startDate1[2]			
						this.endDate = endDate1[1] + '-' + endDate1[2]			
					}else{
						this.startDate = startTime[0]						
						this.endDate = endTime[0]
					}
					this.startTime = startTime1[0] + ':' + startTime1[1]
					this.endTime = endTime1[0] + ':' + endTime1[1]
					if(this.ProductId !== 0 && this.info.SaleType === 0){
						this.GetProductBookData()
					}
				}
			})
		},
		reset(){
			this.GetOrderBookInfo()
		},
		
		// 立即支付
		goPay(item,num) {
				window.location.href = this.$LocalDomain + '/m/product/PayOrder?id= ' + item.OrderId + '&&singleflag=1&&isBookOrder=' + num
		},
		
		// 申请退款
		openRefundApply(item) {
				this.refundApply = true
				this.param.OrderId = item.OrderId
		},
		// 确认申请退款
		OrderRefundApply() {
				if (this.param.reason == '') {
						this.$toast('请输入退款原因')
						return
				}
				OrderRefundApply({
						orderId: this.param.OrderId,
						reason: this.param.reason,
						image: ''
				}).then(res => {
						if (res.Data) {
								// 获取列表
								this.reset()
						}
				})
		},
		// 取消申请退款
		cancelRefundApply() {
				this.param.reason = ''
				this.refundApply = false
		},
		
		// 确认续单(茶室)
		
		OrderRenewalOrder() {
				this.params.Amount = parseInt(this.num*2)
				if (this.params.Amount > this.MaxAmount) {
						this.$toast('续单时长为0.5-' + this.MaxAmount +'单位')
						this.renewalShow = true
						return
				}
				
				const _obj = {}
				_obj.ProductId = this.params.productId
				_obj.Amount = parseInt(this.num*2)
				_obj.SkuId = this.SkuId
				_obj.StoreId = this.params.storeId
				_obj.v_GradePrice = this.params.v_GradePrice
				this.params.userCarListInput.list.push(_obj)
			
				SubmitAddBookOrder(this.params).then(res => {
						if (res.Data) {
							window.location.href = this.$LocalDomain + '/m/product/PayOrder?id= ' + res.Data
											.OrderId + '&&singleflag=1&&isBookOrder=2'
						}
				})
		},
		// 取消续单
		cancelRenewalOrder() {
				this.num = 0.5
				this.renewalShow = false
		},
		// 取消订单
		CancleOrder(item) {
			CancleOrder(item.OrderId).then(res => {
				if (res.Data) {
					// 获取列表
					this.reset()
				}
			})
		},
		// 再次预定
		againOrder(item,type) {
			if(type == 0){
				this.$router.push({
					path: '/orderSubmit',
					query: {
							storeId: item.StoreId,
							productId: item.ProductId,
							orderId: item.OrderId,
							type: type,
							bookStoreId: item.BookStoreId
					}
				})
			}else{
				this.$router.push({
					path: '/teaOrderSubmit',
					query: {
							storeId: item.StoreId,
							productId: item.ProductId,
							orderId: item.OrderId,
							type: type,
							bookStoreId: item.BookStoreId
					}
				})
			}
		},
		// 续单
		renewalOrder(item,type) {
			if(type == 1){
				//酒店续单
				console.log(item,'item.orderId');
				this.$router.push({
					path: '/orderSubmit',
					query: {
							storeId: item.StoreId,
							productId: item.ProductId,
							orderId: item.OrderId,
							type: type,
							bookStoreId: item.BookStoreId
					}
				})
			}else{
				//茶室续单
				
				this.params.OrderId = item.OrderId
				GetCanAddBookOrderTime({orderId:this.params.OrderId}).then(res =>{
					if(res.Data){
						this.MaxAmount = res.Data.MaxAmount/60
						if(this.MaxAmount === 0){
							this.$toast('该房间已被预定')
						}else{
							this.renewalShow = true
						}
					}
				})
			}
			
		},
		// 开门码
		GetRoomQrCode(item) {
			this.infos = item
			GetRoomQrCode(item.OrderId).then(res => {
				if (res.State == 0) {
						return
				}
				this.ewm = res.Data
				this.$nextTick(()=>{
						let imgBase64 = jrQrcode.getQrBase64(this.ewm, {//生成二维码
							padding       : 10,   // 二维码四边空白（默认为10px）
							width         : 200,  // 二维码图片宽度（默认为256px）
							height        : 200,  // 二维码图片高度（默认为256px）
							correctLevel  : QRErrorCorrectLevel.H,    // 二维码容错level（默认为高）
							reverse       : false,        // 反色二维码，二维码颜色为上层容器的背景颜色
							background    : "#ffffff",    // 二维码背景颜色（默认白色）
							foreground    : "#000000"     // 二维码颜色（默认黑色）
						});  //options为配置对象，支持以下配置参数：
						this.qrcode = imgBase64
				})
				this.posterShow = true
			})
		},
		// 为了防止重复生成二维码，使用置空
		closeQrcode() {
			this.posterShow = false
			setTimeout(function(){
				this.qrcode = ''
			},150)
		},
		// 下载二维码
		saveImg() {
			let myCanvas = document.getElementById("qrcode").getElementsByTagName("img")
			let elink = document.createElement("a")
			elink.style.display = "none"
			document.body.appendChild(elink)
			elink.href = myCanvas[0].src
			elink.download = this.infos.RoomNo + this.infos.RoomName +  "核销码"
			elink.click()
			document.body.removeChild(elink)
		},
		
		        
	}

})
</script>
<style lang="scss" scoped>
	.nav-top{
		width: 750px;
		height: 362px;
		background: $param15;
		padding-top: 38px;
	}
	.title{
		color: #fff;
		padding: 32px 0 20px 24px;
		display: flex;
		align-items: center;
		font-family: PingFangSC-Regular, PingFang SC;
		.status{
			font-size: 40px;
			font-weight: 500;
			margin-right: 16px;
		}
	}
	.btn {
		width: 170px;
		height: 64px;
		line-height: 64px;
		border-radius: 32px;
		text-align: center;
		margin-right: 24px;
	}
	.ordermsg_title{
		border-bottom: 0.026667rem solid #F2F3FC;
	}
	.checkin{
		display: flex;
		align-items: center;
	}

	.sef-btn{
		background: #FFFFFF;
		height: 64px;
		line-height: 64px;
		border: 1px solid #666666;	
	}
	.other-btn {
		@include bg-primary;
		height: 64px;
		line-height: 64px;
		border: 1px solid transparent !important;
	}
	.closecss {
		top: 20px;
		right: 16px;
		width: 50px;
		height: 50px;
		position: absolute;
	}
	.poster_main {
		text-align: center;
		padding: 62px 60px 62px;
		img {
			width: 450px;
			height: 450px;
		}
		p {
			font-size: 28px;
			color: #F54F1B;
			padding: 30px 0;
			font-weight: 500;
		}
		div {
			font-size: 28px;
			color: #333;
			font-weight: 400;
		}
	}
	
	/deep/.posterDiv {
			background-color: transparent;
	}

	.down {
			width: 96px;
			// height: 96px;
			// background: #8AC24C;
	}
	.product{
		display: flex;
		justify-content: space-between;
	}
	.room{
		display: flex;
	}
	.w-200{
		width: 200px;
		margin-right: 26px;
	}
	.telSupplier{
		width: 168px;
		height: 48px;
		background: #FFFFFF;
		border-radius: 24px;
		border: 1px solid #979797;
		text-align: center;
	}
	.useTime{
		display: flex;
		flex-direction: column;
		margin-top: 16px;
		padding: 0 24px;
	}
	.time{		
		width: 272px;
		height: 0;
		border:1px dashed #333;
		display: flex;
    align-items: center;
    justify-content: center;
	}
	.times{
		width: 170px;
		height: 40px;
		line-height: 40px;
		background: #FFFFFF;
		border-radius: 20px;
		border: 1px solid #333333;
		text-align: center;
		font-size: 26px;
	}
	.order_msg{
		padding-top: 28px;
		border-top: 1px dashed #CCCCCC;
	}
	.amount{
		background: #F2F3FC;
    border-radius: 50px;
    width: 70%;
    margin: 24px auto;
		padding-right: 124px !important;
	}

	.hours{
		width: 100px;
		height: 72px;
		line-height: 72px;
		position: absolute;
		right: 20%;
		font-size: 28px;
		text-align: right;
	}
</style>
